<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>count: {{ count }}</p>
    <button v-on:click="handleClick">btn</button>
    <p>msg: {{ msg }}</p>
  </div>


  <script src="../Vue.js"></script>
  <script>
    const { createApp } = Vue;

    // 响应式：当data里面的变量发生改变的时候，页面里面使用了这个变量，那么这个页面就会自动更新

    // 此对象的所有顶层属性都会被代理(proxy)到组件实例 (即方法和生命周期钩子中的 this) 上。
    // data里面写的变量，会自动挂载到app实例的顶层，所以在内部，都可以直接使用this.xxx直接获取
    const app = createApp({
      data() {
        return {
          count: 1,
          // 一个变量之后可能会被用到的，一开始就需要有一个初始值放在data里面
          msg: null
        }
      },
      methods: {
        handleClick() {
          // console.log(this.count);
          this.count++;
          this.msg = "hello"
        }
      }
    })
    
    
    app.mount("#app");
  </script>
</body>
</html>